import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { AntDesign } from '@expo/vector-icons';


export default function Game_success ({ navigation }) {

    return (
        <View style={styles.container}>
            <Text style={styles.headerText}>成功啦!!!</Text>
            <View style={styles.buttonContainer}>
                <TouchableOpacity 
                    style={styles.buttonWithIcon}
                    onPress={() => navigation.navigate("Game_select")}
                >
                    <AntDesign name="rightcircleo" size={25} color="black" />
                    <Text style={styles.buttonText}>再来一关</Text>
                </TouchableOpacity>
                <TouchableOpacity 
                    style={styles.buttonWithIcon}
                    onPress={() => navigation.navigate("Home")}
                >
                    <AntDesign name="leftcircleo" size={24} color="black" />
                    <Text style={styles.buttonText}>返回首页</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    buttonContainer: {
        width: "100%",
        alignItems: "center",
    },
    buttonWithIcon: {
        flexDirection: "row", 
        alignItems: "center", 
        borderWidth: 2, 
        borderColor: "#000", 
        backgroundColor: "#ADD8E6",
        borderRadius: 8, 
        padding: 15, 
        marginVertical: 10, 
        justifyContent: "center",
        width: "80%", 
    },
    buttonText: {
        fontSize: 18,
        color: "#000",
        fontWeight: "bold",
    },
    headerText: {
        fontSize: 50,
        fontWeight: "bold",
        color: "#333",
        marginBottom: 30,
        textAlign: "center",
    },
});